![New Universal Login使用時にログイン画面などのテキストを変更したい(Auth0)](https://devio2023-media.developers.io/wp-content/uploads/2020/09/blog_auth0_universallogin.png)
New Universal Login使用時にログイン画面などのテキストを変更したい(Auth0)
Auth0のユニバーサルログインのテキスト文言を変更したいという要望があり、自分で調べて簡単にできることがわかったので記録に残します。
Prompt APIがmanagement apiに用意されており、これを使うことで簡単にカスタマイズ可能となります。
path: /api/v2/prompts/{prompt}/custom-text/{language}
method: PUT
実行に必要なScope: update:prompts
必要なパラメータとして
- prompt
- ログインフローの特定のステップを指すためのもの
- login, login-email-verification, signup, reset-password, consent, mfa-push, mfa-otp, mfa-voice, mfa-phone, mfa-sms, mfa-email, mfa-recovery-code, mfa, status, device-flow, email-verification, organizations, common
- language
- 利用可能な言語
- cs, da, de, en, es, fi, fr-FR, fr-CA, hi, hu, it, ja, ko, nb, nl, po, pt-BR, pt-PT, ro, ru, sk, sv, zh-CN, zh-TW
- body
- 画面グループのカスタム辞書を含むオブジェクト(json形式)
{ "SCREEN": { "TEXT_ID": "text1 in language" }
bodyの SCREEN, TEXT_IDはpromptによって変わります。
現在、SCREENの内容がドキュメント化されているpromptは、
- consent
- device-flow
- email-verification
- login
- mfa
- mfa-email
- mfa-otp
- mfa-push
- mfa-recovery-code
- mfa-sms
- reset-password
- signup
- common
上記13個で、login-email-verification
, mfa-voice
, mfa-phone
, status
, organizations
のページは存在していませんでした。この件に関してはドキュメントのフィードバックを上げておきます。
では、ログイン画面を例にして試してみます。
デフォルトの状態:
赤枠の部分を変更したいとします。
{ "SCREEN": { "TEXT_ID": "text1 in language" }
の形式でbodyパラメーターを与えますが、
TEXT_IDに関してはドキュメントを見ないとどのkeyを使うべきなのかはわからないようです(Prompt APIにはキーの一覧を取得するメソッドがない)。
今回は、prompt:loginのtext
, description
, buttonText
, forgotPasswordText
を変更するのでbodyは
{ "login": { "title":"ログイン画面", "description":"ログインするにはメールアドレスとパスワードを入力してください", "buttonText":"ログイン", "forgotPasswordText":"パスワードを忘れた方はここをクリック" } }
になります。
curlで実行するときのコマンドは、
curl -H "Authorization: Bearer {YOUR_ACCESS_TOKEN}" \ -X PUT \ -H "Content-Type: application/json" \ -d '{"login":{"title":"ログイン画面","description":"ログインするにはメールアドレスとパスワードを入力してください","buttonText":"ログイン","forgotPasswordText":"パスワードを忘れた方はここをクリック"}}' \ https://classmethod-partner-jp.auth0.com/api/v2/prompts/login/custom-text/ja
です。
※ {YOUR_ACCESS_TOKEN}
は自身で取得したものに置き換えます.
Auth0のAPIエクスプローラーで実行する時は、以下の画像のようにpromptとlanguageを選択し、bodyに上記の値を入力して実行します。
結果もUIで確認できます。
キーが間違っているなどのエラーになった時も教えてくれます。
変更後のログイン画面:
この機能を使うことによってブランドイメージやニーズに合わせた文言に変更できるので良いなと思った次第です。 多言語化しているアプリケーションでも、コードを変更せずに簡単に文言を変更できますね。
※ ちなみに、文章をHTML上で改行する事はできませんでした